<template>
	<section>
		<el-col :span="24" class="box">
			<el-col :span="24" class="box-header">会议室申请详情</el-col>
			<el-form :model="detailForm" label-width="120px" class="detail-form">
				<el-form-item label="申请人：">
					<el-col :span="6">{{detailForm.Applicant}}</el-col>
					<el-col :span="3" class="label-txt">申请部门：</el-col>
					<el-col :span="5">{{detailForm.DeptName}}</el-col>
					<el-col :span="3" class="label-txt">申请人电话：</el-col>
					<el-col :span="6">{{detailForm.Mobile}}</el-col>
				</el-form-item>

				<el-form-item label="会议室：">
					<el-col :span="6">{{detailForm.RoomName}}</el-col>
					<el-col :span="3" class="label-txt">会议主题：</el-col>
					<el-col :span="5">{{detailForm.Subject}}</el-col>
					<el-col :span="3" class="label-txt">参会人数：</el-col>
					<el-col :span="6">{{detailForm.Number}}人</el-col>
				</el-form-item>

				<el-form-item label="主持人：">
					<el-col :span="6">{{detailForm.Host}}</el-col>
					<el-col :span="3" class="label-txt">开始时间：</el-col>
					<el-col :span="5">{{detailForm.FromTime}}</el-col>
					<el-col :span="3" class="label-txt">结束时间：</el-col>
					<el-col :span="6">{{detailForm.ToTime}}</el-col>
				</el-form-item>
				<el-form-item label="审核备注 ：" v-show="!hasApply && detailForm.Status == '待审核'">
					<el-col :span="21">
						<el-input type="textarea" :rows="2" placeholder="请填写审核备注 " v-model="comments">
						</el-input>
					</el-col>
				</el-form-item>
				
				<block v-show="detailForm.Status == '已通过' || detailForm.Status == '已驳回'">
					<el-col class="line b-b line-lg pull-in"></el-col>
					<el-form-item label="审核人：">
						<el-col :span="6">{{detailForm.Approvedby}}</el-col>
						<el-col :span="3" class="label-txt">审核时间：</el-col>
						<el-col :span="5">{{detailForm.ApprovedTime}}</el-col>
					</el-form-item>
				</block>
				
				<el-form-item>
					<block v-show="!hasApply && detailForm.Status == '待审核'">
						<el-button type="primary" @click.native="fnApprovePass">通过</el-button>
						<el-button type="danger" @click.native="fnApproveNoPass">驳回</el-button>
					</block>
					
					<el-button class="m-l-10" v-show="hasApply && new Date().getTime() - new Date(detailForm.CreatedTime).getTime() <= 600000" type="warning" @click.native="fnApproveRevoke">撤销</el-button>
					<!--<el-button class="m-l-10" v-show="!hasApply && detailForm.Status == '待审核'" type="warning" @click.native="fnApproveRevoke">撤销</el-button>-->
				
					<el-button class="m-l-10" v-if="hasApply" @click.native="emitGoBackApply">返回</el-button>
					<el-button class="m-l-10" v-else @click.native="emitGoBackReview">返回</el-button>
				</el-form-item>
			</el-form>
		</el-col>
		
		<!--操作日志-->
		<el-col class="log-header">操作日志</el-col>
		<el-table :data="logs" border class="log-list">
			<el-table-column type="index" width="60">
			</el-table-column>
			<el-table-column prop="Remark" label="日志内容 " min-width="300">
			</el-table-column>
			<el-table-column prop="Createdby" label="创建者 " width="120">
			</el-table-column>
			<el-table-column prop="CreatedTime" label="创建时间 " width="200" :formatter="fnDateFormat ">
			</el-table-column>
		</el-table>
	</section>
</template>

<script>
	import Svc from '../../service/index.js'
	import moment from 'moment'
	export default {
		props:['review-id','has-apply'],
		data() {
			return {
				//申请的内容
				detailForm:{},
				//审核备注
				comments : '',
				logs:[]//操作日志
			}
		},
		methods: {
			//自定义事件->跳转到我的申请列表
			emitGoBackApply(){
				this.$emit('go-back','my-apply')
			},
			//自定义事件->跳转到审核列表
			emitGoBackReview(){
				this.$emit('go-back','review-list')
			},
            //显示message提示框
            openMessage : function(msg,type){
    	        this.$message({
		          	showClose: true,
		          	message: msg,
		          	type: type
		        });
            },
			//获取当前记录的内容
			fnCurrentReview(){
				var that = this
	            Svc.fnGetData('/api/mroom/appointment/detail/'+that.reviewId,{},function(res){
	            	if (res.body.ErrCode == 0){
	            		that.detailForm = res.body.Data
	            	} else {
	            		that.openMessage("申请详情获取失败！ ",'error')
	            	}
	            },function(res){
	            	that.openMessage("网络错误，请重新！ ",'error')
	            })
			},
			//审核操作
			fnApprove(isPass){
				var that = this
				var params = {
					ID : that.reviewId,
					Comment : that.comments,
					IsPass : isPass
				}
				
				Svc.fnPostData('/api/mroom/appointment/approve',params,function(res){
	            	if (res.body.ErrCode == 0){
	            		that.openMessage('审核操作成功！','success')
	            		setTimeout(function () {
	            			that.emitGoBackReview()
			          	},1000);
	            	} else {
	            		that.openMessage(res.body.ErrMsg,'error')
	            	}
	            },function(res){
	            	that.openMessage("网络错误，请重新！ ",'error')
	            })
			},
			//通过审核
			fnApprovePass(){
				var that = this
				that.$confirm('您确认要通过本条会议室申请吗?', '提示', {
					type: 'warning'
				}).then(function(){
					that.fnApprove(true)
				})
			},
			//驳回审核
			fnApproveNoPass(){
				var that = this
				if (that.comments) {
					that.$confirm('您确认要驳回本条会议室申请吗?', '提示', {
						type: 'warning'
					}).then(function(){
						that.fnApprove(false)
					})
				} else {
					that.openMessage("请填写审核备注~",'warning')
				}
			},
			//撤销申请
		    fnApproveRevoke(){
		    	var that = this
		    	if (that.comments) {
		    		that.$confirm('您确认要撤销本条会议室申请吗?', '提示', {
						type: 'warning'
					}).then(function(){
						var params = {
				    		ID : that.reviewId,
							Reason : that.comments
				    	}
						Svc.fnPostData('/api/mroom/appointment/cancel',params,function(res){
			            	if (res.body.ErrCode == 0){
			            		that.openMessage("撤销操作成功！",'success')
			            		setTimeout(function () {
			            			that.emitGoBackReview()
					          	},1000);
			            	} else {
			            		that.openMessage("撤销操作失败！",'error')
			            	}
			            },function(res){
			            	that.openMessage("网络错误，请重新！",'error')
			            })
					})
	    		} else {
					that.openMessage("请填写审核备注~",'warning')
				}
		    },
			//获取操作记录
			fnGetLogs(){
				var that = this
				Svc.fnGetData('/api/mroom/appointment/logs/' + that.reviewId,{},function(res){
	            	if (res.body.ErrCode == 0){
	            		that.logs = res.body.Data
	            	} else {
	            		that.openMessage(res.body.ErrMsg,'error')
	            	}
	            },function(res){
	            	that.openMessage("网络错误，请重新！ ",'error')
	            })
			}
		},
		mounted() {
			//获取当前记录的内容
			this.fnCurrentReview()
			//获取操作记录
			this.fnGetLogs()
		}
	}
</script>

<style scoped>
	.m-r-2{
		margin-right: 2px;
	}
	
	.m-l-10{
		margin-left: 10px;
	}

	.box {
		background-color: #fff;
   		box-sizing: border-box;
   		background: #fff;
    	border: 1px solid #d1dbe5;
	    box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
		margin-top: 20px;
	}

	.box-header{
		background-color: #eef1f6;
	    border-bottom: 1px solid #d1dbe5;
	    padding: 10px;
	    margin-bottom: 24px;
	    font-size: 15px;
	    color: #48576a;
	}

	.detail-form {
		margin:20px;
		width:92%;
		min-width:600px;
	}
	
	.label-txt {
		color: #48576a;
	    text-align: right;
    	margin-right: 10px;
	}
	
	.log-header{
		margin: 40px 0 10px 0;
	    font-size: 15px;
	    font-weight: 600;
	}
	
	.log-list{
		width: 100%;
		margin-top: 20px;
		box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
	}
	
	/*分割线 start*/
	.line {
	    height: 2px;
	    font-size: 0;
	    overflow: hidden;
	}
	.b-b {
	    border-bottom: 1px dashed #ddd;
	}
	.line-lg {
	    margin-bottom: 20px;
	}
	/*分割线 end*/
</style>